<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="slick.min.css">
    <!--Swiper3.0.4-->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .blue-slide {
            background: #4390EE;
        }
        .red-slide {
            background: #CA4040;
        }
        .orange-slide {
            background: #FF8604;
        }
        .slick-slide{
            line-height: 300px;
            color: #fff;
            font-size: 36px;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="slick">
    <div class="blue-slide">slider1</div>
    <div class="red-slide">slider2</div>
    <div class="orange-slide">slider3</div>
    <div class="red-slide">slider4</div>
    <div class="orange-slide">slider5</div>
</div>
<script src="../../src/lib/jquery.js"></script>
<script src="slick.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('.slick').slick({
            dots: false,
            arrows:false,

            lazyLoad: 'ondemand',
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 5000,
        });
    })
</script>

</body>
</html>
